<template>
	<div :class="{ anframe: frame }" v-if="frame">
		<div v-for="itme in Envelope" :key="itme.id" class="redEnvelope" :style="itme.function"></div>
	</div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import shuffle from "./getScrambleArray.js"


const props = defineProps({
	frame: Boolean
})
const Envelope =ref([])
// 生命函数
// 渲染时：beforeMount、 mounted
//vue3=>setup:onBeforeMount,onMounted
onBeforeMount(() => {
	let backgroundImage = ["--background-a1", "--background-a2", "--background-a3", "--background-a4"];
	let timing = ["--timing-a1", "--timing-a2", "--timing-a3", "--timing-a4"];
	let arr = [];
	for (let i = 0, j = 0; i < 98; i += Math.round(Math.random() * 3) + 2, j++) {
		let tmp = "animation-delay:" + ((Math.floor(Math.random() * 50 + 2)) / 10) + "s;"
			+ "margin-left: " + i + "%;"
			+ "animation-timing-function:var(" + shuffle(timing, 1) + ");"
			+ "background-image:var(" + shuffle(backgroundImage, 1) + ");"
		arr[j] = {
			id: j,
			function: tmp
		}
	}
	Envelope.value = arr
})


</script>

<style scoped>
.anframe {
	width: 100%;
	display: flex;
}

/* 图片 效果  */
.redEnvelope {
	--background-a1: url(@/assets/img/a1.png);
	--background-a2: url(@/assets/img/a2.png);
	--background-a3: url(@/assets/img/a3.png);
	--background-a4: url(@/assets/img/a4.png);

	--timing-a1: cubic-bezier(0.43, 0.01, 0.2, 0.43);
	--timing-a2: cubic-bezier(0.275, 0.28, 0.165, 0.1);
	--timing-a3: cubic-bezier(0.47, 0.2, 0.545, 0.615);
	--timing-a4: cubic-bezier(0.895, 0.03, 0.685, 0.22);

	--width-style: 40px;
	/* 元素在文档中的定位方式 */
	position: absolute;
	/* 不透明度 */
	opacity: 0;
	/*红包样式*/
	width: var(--width-style);
	height: var(--width-style);
	animation: drops 2s infinite;
	animation-timing-function: var(--background-a1);
	background-image: var(--timing-a1);
	background-size: auto var(--width-style);
}


@keyframes drops {
	0% {
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate3d(10px, 100vh, -10px);
	}
}
</style>
